<template>
<div>
  <!-- Navigator Mini Bar -->
  <header :title="title" :shoppingCartNumber="shoppingCartNumber" ref="header"></header>
  <!-- Banner Slider -->
  <banner class="banner" :banners="this.banners" ref="banner"></banner>
  <!-- Navigator Tab Page -->
  <navigator :categories="this.categories" @changeShoppingCartNumber="handleShoppingCartNumber"></navigator>
  <!-- Announcement Overlay -->
  <announcement :announcement="this.announcement" @changeAnnouncementVisiabled="handleAnnouncementVisiabled"></announcement>

  <desk :desk="this.desk" @changeDeskVisiabled="handleDeskVisiabled"></desk>
</div>
</template>

<script>
import { getMerchantAll } from '@/api/merchant'
import Header from '@/components/layouts/header'
import Banner from '@/components/layouts/banner'
import Navigator from '@/components/layouts/navigator'
import Announcement from '@/components/layouts/announcement'
import desk from '@/components/layouts/desk'
import { i18n } from '@/renderer/modules/lang'
export default {
  components: {
    Header,
    Banner,
    Navigator,
    Announcement,
    desk
  },
  data: () => ({
    params: {},
    mid: '2748',
    tid: '1',
    title: '',
    banners: [],
    categories: [],
    announcement: {
      visiabled: false,
      title: i18n.t('home.notice'),
      content: ''
    },
    desk: {
      visiabled: false,
      title: i18n.t('home.notice'),
      content: ''
    },
    shoppingCartNumber: 0
  }),
  created () {
    this.getMerchantAll()

    this.handleShoppingCartNumber()
  },
  methods: {
    handleAnnouncementVisiabled (boolean) {
      //this.desk.visiabled = this.announcement.visiabled ? false : true;
      this.announcement.visiabled = boolean
    },
    handleDeskVisiabled (boolean) {
     // this.desk.visiabled = boolean
    },
    handleShoppingCartNumber () {
      let shoppingCartData = localStorage.getItem('shoppingCart') ? JSON.parse(localStorage.getItem('shoppingCart')) : {}
      let shoppingCartNumber = 0
      for (let key in shoppingCartData) {
        shoppingCartNumber = parseFloat(shoppingCartNumber) + parseFloat(shoppingCartData[key].number)
      }

      this.shoppingCartNumber = shoppingCartNumber
    },
    getMerchantAll () {
      if (this.$route.query.mid) localStorage.setItem('merchant_id', this.$route.query.mid)
      if (this.$route.query.tid) localStorage.setItem('table_id', this.$route.query.tid)

      this.mid = localStorage.getItem('merchant_id')
      this.tid = localStorage.getItem('table_id')

      getMerchantAll({
        system_type: localStorage.getItem('system_type'),
        timestamp: localStorage.getItem('timestamp'),
        key: localStorage.getItem('key'),
        id: this.mid,
        table_id: this.tid,
        lang_id: localStorage.getItem('language')
      }).then(res => {
        this.title = res.data.mname
        this.desk.title = res.data.mname
        this.banners = res.data.banner
        this.categories = res.data.categories
        /* 检测公告是否弹出 */
        let datetimestamp = (new Date()).getTime() / 1000
        let time = localStorage.getItem('datetimestamp') ? localStorage.getItem('datetimestamp') : false
        if (time === false) {
          this.announcement.visiabled = true
          localStorage.setItem('datetimestamp', datetimestamp)
        } else if ((datetimestamp - time) > 7200) {
          this.announcement.visiabled = true
          localStorage.setItem('datetimestamp', datetimestamp)
        }
        //this.desk.visiabled = this.announcement.visiabled ? false : true;
        this.announcement.content = res.data.announce
      }).catch(err => {
        console.log(err.message)
      }).finally(() => {})
    },
    getOutsideHeight () {
      return this.$refs.header.$el.offsetHeight + this.$refs.banner.$el.offsetHeight
    }
  }
}
</script>
